<template>
	<div>
		<ul>
			<li v-for="(item,index) in datas" :key="index" @click="fen(index)" :class="{blue:i===index}">{{item.name}}({{item.count}})</li>
		</ul>
		<b_food_ping></b_food_ping>
	</div>
</template>

<script>
	import b_food_ping from "../components/b_food_pingjia.vue"
	export default{
		data(){
			return{
				datas:[],
				i:0,
			}
		},
		created() {
			this.$axios({
				url:'https://elm.cangdu.org/ugc/v2/restaurants/'+this.$route.query.id+'/ratings/tags',
				method:'get'
			}).then(res=>{
				this.datas = res.data;
				// window.console.log(res.data);
			})
		},
		components:{
			b_food_ping
		},
		methods:{
			fen(index){
				 this.i = index;
			}
		}
	}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
	}
	ul{
		overflow: hidden;
		padding: 10px 10px;
	}
	ul li{
		list-style: none;
		display: block;
		float: left;
		border: 1px;
		border-radius: 5px;
		padding: 5px 10px;
		margin: 2px 2px;
		font-size: 11px;
		background-color: #ebf5ff;
		color: #6d7885;
	}
	.blue{
		color: #FFFFFF;
		background: #3190e8;
	}
</style>
